<template>
	<el-container style="height: 30%;overflow: auto;">
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="waterMark=='1'">
					<el-tree ref="group" class="menu" node-key="sortId" :data="group" :props="groupsProps" :current-node-key="''"
							 :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick">
					</el-tree>
					</sc-water-mark>
				</el-main>
			</el-container>
	<el-container style="height: 70%;overflow: auto;">
			<el-header>
				<div class="left-panel">
					<span v-if="folderName!=''" style="font-size: 18px;font-weight: 600">《{{folderName}}》</span>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input v-model="search.keyword" placeholder="目录名称" clearable></el-input>
						<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="waterMark=='1'">
				<el-row :gutter="15">
					<el-col style="padding: 10px;margin: 5px;cursor: pointer" :xl="3" :lg="3" :md="4" :sm="6" :xs="24" v-for="item in fileItemList" :key="item.itemId"
							@click="openFolder(item)">
						<div style="text-align: center;">
							<el-icon style="font-size: 40px;">
								<el-icon-folder-opened/>
							</el-icon>
						</div>
						<div style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
							{{ item.titleName }}
						</div>
					</el-col>
				</el-row>
				</sc-water-mark>
			</el-main>
		</el-container>
	<file-list v-if="dialog.detailsSave" ref="fileListDialog" @closed="dialog.detailsSave=false"></file-list>
</template>

<script>
import fileList from './fileList'
export default {
	name: 'My FileMap',
	components: {
		fileList
	},
	data() {
		return {
			dialog:{
				detailsSave: false
			},
			showGrouploading: false,
			groupFilterText: '',
			group: [],
			groupsProps: {
				label:"name",
				value: "sortId"
			},
			fileItemList:[],
			folderName:'',
			search: {
				sortId:"",
				keyword: ""
			},
			waterMarkContent: '',
			waterMarkSubtext: '',
			waterMark: '0',
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val);
		}
	},
	mounted() {
		this.waterMark = this.$TOOL.data.get("WATER_MARK");
		this.waterMarkContent = this.$TOOL.data.get("WATER_MARK_CONTENT");
		this.waterMarkSubtext = this.$TOOL.data.get("WATER_MARK_SUBTEXT");
		this.getFileMapSortTree();
		this.getMyFileItemList();
	},
	methods: {
		//加载树数据
		async getFileMapSortTree(){
			this.showGrouploading = true;
			let res = await this.$API.file.fileMap.getFileMapSortTree.get();
			this.showGrouploading = false;
			this.group = res.data;
		},
		async getMyFileItemList(){
			let res = await this.$API.file.fileMap.getMyFileItemList.get(this.search);
			if(res.code==200)
			{
				this.fileItemList = res.data;
			}
		},
		openFolder(item){
			this.folderName = item.titleName
			this.dialog.detailsSave = true
			this.$nextTick(() => {
				this.$refs.fileListDialog.open().setData({itemId:item.itemId});
			})
		},
		//树过滤
		groupFilterNode(value, data){
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data){
			this.search.sortId = data.sortId;
			this.getMyFileItemList();
		},
		//搜索
		upsearch(){
			this.getMyFileItemList();
		},

	}
}
</script>
<style scoped>
.custom-tree-node {
	/*display: flex;*/
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}
</style>
